<template>
  <div class="select">
    <div class="select-input clearfix" @click="showSelect">
      <p class="fl" v-if="isShowPlaceholder" style="color:#d4d3d3">{{placeholder}}</p>
      <p class="fl" v-else>{{value}}</p>
      <img src="../assets/img/arrow-down.png" alt="" class="fr" />
    </div>
    <ul v-if="isShowSelect" ref="treeWrap">
        <li v-for="(item,index) in list" :key="index" @click="selectData(item.value,item.label)">{{item.label}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  props:{
      list:{
          type:Array,
          default () {
              return []
          }
      },
      placeholder:{
          type:String,
          default:'请选择'
      }
  },
  data() {
    return {
      isShowSelect:false,
      isShowPlaceholder:true,
      value:''
    };
  },
    mounted () {
     let _this = this;
    document.addEventListener('mouseup',(e) =>{
      console.log('骈')
        let tree = this.$refs.treeWrap
        if (tree) {
          if (!tree.contains(e.target)) {
             this.isShowSelect = false
          }
        }
      })   
   
  },
  methods: {
    selectData(val,label) {
       this.isShowSelect = false
      this.value = label
      this.$emit("selectValue",val)
      this.isShowPlaceholder = false
    },
    showSelect () {
      this.isShowSelect=!this.isShowSelect
     
    }
  }
};
</script>
<style scoped >
.select-input {
  width: 296px;
  height: 36px;
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  line-height: 35px;
  cursor: pointer;
}
.select-input img {
  width: 20px;
  height: 20px;
  margin-top: 8px;
  margin-right: 10px;
}
.select-input p {
    width: auto;
    margin-left: 12px;
    font-size: 14px;
}
.select {
  position: relative;
   width: 296px;
   height: 36px;
}
.select ul {
  background: #fff;
  position: absolute;
  top:36px;
  left:0;
  width: 100%;
  border: 1px solid #e7e7e7;
  border-top:0;
  z-index: 100;

}
.select ul li{
  text-indent: 5px;
  line-height: 35px;
  border-bottom: 1px solid #f8f8f8;
}
.select ul li:hover {
  background: #f6f6f6;
  cursor: pointer;
}
</style>